<template lang="html">
  <el-form ref="form" class="page-header" :inline="true" :model="form" label-suffix=":">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4">
        <el-form-item prop="operName" label="操作人员名称">
          <el-input v-model="form.operName" placeholder="请输入" @keyup.enter.native="doSearch" />
        </el-form-item>
      </el-col>

      <el-col :xs="8" :sm="8">
        <el-form-item prop="operDate" label="日期">
          <el-date-picker
            v-model="form.operDate"
            :picker-options="pickerOptions"
            :clearable="false"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="doSearch"
          />
        </el-form-item>
      </el-col>
      <el-col :sm="8" :md="4">
        <div style="width: 350px">
          <el-button icon="el-icon-search" @click="doSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="doReset">重置</el-button>
          <el-button
            v-has="'recordExport'"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="doExport"
            >Excel导出</el-button
          >
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { DictKeys } from "api/sys/dict";
import { OperLogExport } from "api/sys/log";
import pageHeaderMixin from "mixins/pageHeaderMixin";

export default {
  mixins: [pageHeaderMixin],
  data() {
    return {
      form: {
        // 操作人员名称
        operName: "",
        // 默认值为当前一周的数据
        operDate: [],
        // 所属应用
        affiliationApp: "",
      },
      // 所属应用配置文件
      applicationOptions: [],
      // 最多只能选择近半年的数据
      pickerOptions: {
        disabledDate: (time) => {
          return (
            time.getTime() > Date.now() || time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000
          );
        },
      },
      // 导出按钮的开关
      exportLoading: false,
    };
  },
  created() {
    this.setOperDate();
    this.setApplicationOptions();
  },
  methods: {
    /**
     * 设置搜索时间默认值
     */
    setOperDate() {
      const currentDate = new Date();
      const targetDate = currentDate - 1000 * 60 * 60 * 24 * 7;
      this.form.operDate = [new Date(targetDate), currentDate];
    },
    /**
     * 设置所属应用配置文件
     */
    async setApplicationOptions() {
      try {
        const data = await DictKeys("affiliation_app");
        if (data) {
          const { affiliation_app: affiliationApp } = data;
          this.applicationOptions = affiliationApp;
        }
      } catch (e) {
        console.log(e);
      }
    },
    /**
     * 暴露出去的数据格式化
     */
    formDataFormat(val) {
      const {
        operDate: [startDate, endDate],
        ...obj
      } = val;
      return {
        ...obj,
        startDate: this.$timeFormat(startDate),
        endDate: this.$timeFormat(endDate),
      };
    },
    /**
     * 导出功能
     */
    async doExport() {
      try {
        this.exportLoading = true;
        await OperLogExport(this.searchObjFormat());
      } catch (e) {
        console.log(e);
      } finally {
        this.exportLoading = false;
      }
    },
    /**
     * 格式化获取列表数据
     */
    searchObjFormat() {
      const obj = this.formDataFormat(this.form);
      const { startDate } = obj;
      let tempObj = {};
      if (!startDate) {
        const currentDate = new Date();
        const targetDate = currentDate - 1000 * 60 * 60 * 24 * 7;
        tempObj = {
          startDate: this.$timeFormat(targetDate),
          endDate: this.$timeFormat(currentDate),
        };
      }
      return {
        ...(!startDate && tempObj),
        ...obj,
      };
    },
  },
};
</script>
